<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>天天生鲜－购物车</title>
    <link rel="stylesheet" th:href="@{/css/reset.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/main.css}" type="text/css">
    <script th:src="@{/js/jquery-1.12.4.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/config.js}" type="text/javascript"></script>
</head>
<body>
<!--头部  开始-->
<div th:include="~{global/header :: header}"></div>
<!--头部 结束-->

<div class="search_bar clearfix">
    <a class="logo fl" th:href="@{/index}"><img th:src="@{/images/logo.png}"></a>
    <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
    <div th:include="~{global/search :: search}"></div>
</div>

<div class="total_count" id="allProduce">全部商品<em th:text="${carCount}"></em>件</div>
<form>


    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品单价</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>


    <ul class="cart_list_td clearfix" id="232" th:each="car:${carList}">
        <li class="col01"><input checked="" name="" type="checkbox" th:value="${car.carId}"></li>
        <li class="col02"><img th:src="@{'/images/所有商品/'+${car.image}}"></li>
        <li class="col03" th:text="${car.produceName}"></li>
        <li class="col04" th:text="${car.unit}"></li>
        <li class="col05" th:text="${car.priceText}+'元'"></li>
        <input id="carId" name="carIds" th:value="${car.carId}" type="hidden"/>
        <li class="col06">
            <div class="num_add">
                <a class="add fl" href="javascript:void(0);" th:onclick="|javascript:addCarProduceAccount(${car.carId})|">+</a>
                <input class="num_show fl" type="text" th:value="${car.account}">
                <a class="minus fl" href="javascript:void(0);" th:onclick="|javascript:subCarProduceAccount(${car.carId})|">-</a>
            </div>
        </li>
        <li class="col07" th:text="${car.priceText}+'元'"></li>
        <li class="col08"><a href="javascript:void(0);" th:onclick="|javascript:deleteCarProduce(${car.carId})|">删除</a></li>
    </ul>
    </c:forEach>

    <ul class="settlements">
        <li class="col01"><input checked="" id="check_all" th:onclick="|javascript:switchCheckAll()|" name="" type="checkbox"></li>
        <li class="col02">全选</li>
        <li class="col03">合计(不含运费)：<span>¥</span><em id="zong" th:text="${totalPrice}"></em><br>共计<b id="zongshu"
                                                                                   th:text="${carCount}"></b>件商品
        </li>
        <li class="col04"><a href="javascript:void (0)" th:onclick="|javascript:pay()|" id="jiesuan" style="background-color: rgb(255, 61, 61);">去结算</a>
        </li>
    </ul>
</form>

<script>

    let pending=false;
    function deleteCarProduce(id) {
        if (pending) {
            return;
        }
        pending = true;
        if(confirm("您确定要将该商品从购物车中删除吗？")){
            $.ajax({
                url: Config.getUrlPreFix() + '/user/car/deleteCarProduce',
                contentType: "application/x-www-form-urlencoded",
                method: "POST",
                dataType: "json",
                data: {
                    id: id
                },
                success: function (res) {
                    if (res.code == 200) {
                        alert('从购物车中删除成功！');
                        window.location.href = Config.getUrlPreFix() + '/user/car/list';
                        return;
                    }
                    alert(res.message);
                },
                // 失败： 提示错误信息
                error: function () {
                    alert("请求出错！");
                    return
                },
                complete() {
                    pending = false;
                }

            })
        }
    };


    function addCarProduceAccount(id) {
        if (pending) {
            return;
        }
        pending = true;
            $.ajax({
                url: Config.getUrlPreFix() + '/user/car/addCarProduceAccount',
                contentType: "application/x-www-form-urlencoded",
                method: "POST",
                dataType: "json",
                data: {
                    id: id
                },
                success: function (res) {
                    if (res.code == 200) {
                        window.location.href = Config.getUrlPreFix() + '/user/car/list';
                        return;
                    }
                    alert(res.message);
                },
                // 失败： 提示错误信息
                error: function () {
                    alert("请求出错！");
                    return
                },
                complete() {
                    pending = false;
                }

            })
    };

    function subCarProduceAccount(id) {
        if (pending) {
            return;
        }
        pending = true;
        $.ajax({
            url: Config.getUrlPreFix() + '/user/car/subCarProduceAccount',
            contentType: "application/x-www-form-urlencoded",
            method: "POST",
            dataType: "json",
            data: {
                id: id
            },
            success: function (res) {
                if (res.code == 200) {
                    window.location.href = Config.getUrlPreFix() + '/user/car/list';
                    return;
                }
                alert(res.message);
            },
            // 失败： 提示错误信息
            error: function () {
                alert("请求出错！");
                return
            },
            complete() {
                pending = false;
            }

        })
    };


    $(function(){

        var ids = [];


    //    全选反选
        $("[type='checkbox']").eq($("[type='checkbox']").length-1).click(function(){
            for(var i = 0;i<$("[type='checkbox']").length-1;i++){
                $("[type='checkbox']").eq(i).prop("checked",$(this).prop("checked"));
            }
            for(var i = 0;i<$("[type='checkbox']").length-1;i++){
                if ($("[type='checkbox']").eq(i).prop("checked")){
                    ids.push($("[type='checkbox']").eq(i).val());
                }
            }
            reflushTotalPrice(ids);
            ids = [];
        });

    //    单选影响全选反选
        for(var i = 0;i<$("[type='checkbox']").length-1;i++){
            $("[type='checkbox']").eq(i).click(function(){
                var flag = true;
                for(var j = 0;j<$("[type='checkbox']").length-1;j++){
                    if(!$("[type='checkbox']").eq(j).prop('checked')){
                        flag = false;
                    }
                }
                $("[type='checkbox']").eq($("[type='checkbox']").length-1).prop('checked',flag);


                for(var i = 0;i<$("[type='checkbox']").length-1;i++){
                    if ($("[type='checkbox']").eq(i).prop("checked")){
                        ids.push($("[type='checkbox']").eq(i).val());
                    }
                }
                reflushTotalPrice(ids);
                ids=[];
            })
        }

        function reflushTotalPrice(ids) {
            document.getElementById('zongshu').innerText = ids.length;
            if (ids.length==0){
                document.getElementById('zong').innerText = 0;
                return;
            }
            $.ajax({
                url:Config.getUrlPreFix()+'/user/car/computeTotalPrice',
                dataType:'json',
                method:'POST',
                data:{
                    ids:ids
                },
                success:function (res) {
                    if (res.code==200){
                        document.getElementById('zong').innerText = res.data.totalPrice;
                        return;
                    }
                    alert(res.message);
                },
                error:function () {
                    alert('请求失败！');
                }
            })
        }
    })

    function pay() {
        var ids = []
        for(var i = 0;i<$("[type='checkbox']").length-1;i++){
            if ($("[type='checkbox']").eq(i).prop("checked")){
                ids.push($("[type='checkbox']").eq(i).val());
            }
        }
        if (ids.length==0){
            alert('请选择要付款的商品！');
        }
        $.ajax({
            url:Config.getUrlPreFix()+'/user/order/addOrder',
            dataType:'json',
            method:'POST',
            data:{
                ids:ids
            },
            success:function (res) {
                if (res.code==200){
                    alert("支付成功！");
                    window.location.href = Config.getUrlPreFix()+'/user/order/list';
                    return;
                }
                alert(res.message);
            },
            error:function () {
                alert('请求失败！');
            }
        })

    }



</script>
</body>
</html>
